<template>
	<view class="my-page">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="" bgColor="transparent" :autoBack="true"
			:placeholder="true" title="云币大博杀">
			<view class="u-nav-slot" slot="right">
				<view style="color: #fff;" @click="goRecord">
					参与记录
				</view>
			</view>
		</u-navbar>
		<view class="circle-container">
			<view v-for="(circle, index) in circles" :key="index" class="circle">
				<!-- 图片元素放置在一个子 view 中，以防止旋转影响图片 -->
				<view class="image-container">
					<view class="head" v-if="list[index]">
						<image v-if="currentIndex != index" :src="'https://web.sunsk.top'+list[index].u_img" mode="">
						</image>
						<image v-else></image>
						<view class="name">{{list[index].user}}</view>
					</view>
					<view class="headadd ld infinite ld-rush-btt-in" v-else>
						<image src="/static/my/add.png" mode=""></image>
						<view class="name">待加入</view>
					</view>
					<view v-if="currentIndex === index" class="active">
						<image src="/static/my/taotai.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="jjc-bg">
				<view class="title ld infinite ld-opac">{{points}}</view>
				<view class="mintitle">奖金池</view>
			</view>
		</view>
		<view class="tab-box">
			<view :class="item.show == true?'activity':'stillness'" class="head-item" v-for="(item,index) in headList"
				:key="index" @click="headTab(index)">
				{{item.text}}
			</view>
		</view>
		<view class="btn ld infinite ld-zoom-out" @click="goct">
			<view>
				立即参与云币大博杀
			</view>
		</view>
		<view class="yxcontent">
			<view class="warn">
				{{cont}}
			</view>
		</view>
		<!-- <button @click="startAnimation">开始</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headList: [{
						text: '10云矿石',
						show: true
					},
					{
						text: '50云矿石',
						show: false
					},
					{
						text: '100云矿石',
						show: false
					},
					{
						text: '200云矿石',
						show: false
					}
				],
				id: '',
				text: 10,
				cont: '',
				circles: Array(5).fill(0), // 五个圆圈
				currentIndex: -1, // 当前显示红色边框的圆圈
				intervalId: null, // 存储定时器的ID
				list: [], // 用于存储图片数据
				points: 0
			}
		},
		onLoad(e) {
			this.id = e.id
			this.postdetails()
		},
		methods: {
			startAnimation(index) {
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}

				const duration = 5000; // 动画总时长（毫秒）
				const startTime = performance.now();

				const animate = (currentTime) => {
					const elapsed = currentTime - startTime;
					const progress = Math.min(elapsed / duration, 1); // 计算动画进度

					// 使用非线性函数来模拟速度变化（如 ease-out）
					const easedProgress = this.easeOut(progress);

					// 更新动画状态
					this.currentIndex = Math.floor(easedProgress * 30) % 5;

					if (progress < 1) {
						requestAnimationFrame(animate); // 继续动画
					} else {
						this.currentIndex = index; // 确保动画结束时的最终状态
						uni.showToast({
							title:'玩家'+this.list[index].user+'被淘汰！',
							icon:'none'
						})
						setTimeout(()=>{
							uni.showToast({
								title:'大逃杀已结束！',
								icon:'none'
							})
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				};

				// ease-out 函数，速度开始快，结束时变慢
				this.easeOut = (t) => t * (2 - t);

				requestAnimationFrame(animate); // 开始动画
			},
			goct() {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否确定参与云币大搏杀？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							console.log('用户点击确定');
							let params = {
								groupId: app.id,
								points: app.text
							}
							app.$Request({
								method: 'POST',
								url: '/api/luckys/pintuanjoin',
								data: params
							}).then(res1 => {
								uni.hideLoading()
								if (res1.code == 1) {
									uni.showToast({
										title: '参与成功！',
										icon: 'none'
									})
									if (res1.loser > 0) {
										// 开奖结果
										uni.showLoading({
											mask: true
										})
										app.postend(res1.loser)
									} else {
										// 人数不够不开奖
										app.postdetails()
									}
								} else {
									uni.showToast({
										title: res1.message,
										icon: 'none'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			postend(endid) {
				this.$Request({
					method: 'POST',
					url: '/api/luckys/pintuanxq',
					data: {
						groupId: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						let userindex = ''
						this.points = 0
						this.list = res.data
						this.list.forEach((item, index) => {
							this.points += item.points
							if (endid == item.id) {
								userindex = index
							}
						})
						uni.showToast({
							title: '准备开奖！',
							icon: 'none'
						})
						this.startAnimation(userindex)
					} else {
						uni.showToast({
							title: res.msg, 
							icon: 'none'
						})
					}
				})
			},
			headTab(index) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				if (index == 0) {
					this.text = 10
				}
				if (index == 1) {
					this.text = 50
				}
				if (index == 2) {
					this.text = 100
				}
				if (index == 3) {
					this.text = 200
				}
			},
			postdetails() {
				this.$Request({
					method: 'POST',
					url: '/api/luckys/pintuanxq',
					data: {
						groupId: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						this.points = 0
						this.list = res.data
						this.list.map(item => {
							this.points += item.points
						})
						this.cont = res.notice
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goRecord() {
				uni.navigateTo({
					url: '/pages/home/team_work/record'
				})
			}
		}
	}
</script>
<style>
	.infinite {
		animation-iteration-count: infinite !important
	}

	.ld {
		transform-origin: 50% 50%;
		transform-box: fill-box
	}

	.ld-opac {
		animation: ld-opac-in 2s linear infinite;
		/* 3s 可以根据需要调整动画持续时间 */
		animation-fill-mode: forwards;
	}

	@keyframes ld-opac-in {
		0% {
			opacity: 0.4;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.4;
		}
	}

	.ld-zoom-out {
		animation: ld-zoom-out 2s linear infinite;
		/* 3s 可以根据需要调整动画持续时间 */
		animation-fill-mode: forwards;
	}

	@keyframes ld-zoom-out {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.2);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.ld-rush-btt-in {
		animation: ld-throw-ttb-in 2s 1 linear;
		animation-fill-mode: forwards;
		transform: translate(0, -59.127121840165316%);
		opacity: 0
	}

	@keyframes ld-throw-ttb-in {
		0% {
			transform: translateY(0%);
			opacity: 1;
		}

		50% {
			transform: translateY(-5%);
			opacity: 1;
		}

		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}
</style>
<style lang="scss" scoped>
	.my-page {
		min-height: 100vh;
		background-image: url('../../../static/my/detalls-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: 50%;

		.yxcontent {
			padding: 30rpx;

			.warn {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.btn {
			background: linear-gradient(90deg, #C8F673 0%, #98F083 100%);
			width: 456rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			color: #17191A;
			font-weight: 600;
			font-size: 32rpx;
			border-radius: 50rpx;
		}

		.tab-box {
			display: flex;
			justify-content: space-between;
			text-align: center;
			padding: 60rpx;

			.head-item {
				font-size: 24rpx;
				font-weight: 600;
				border: 1rpx solid transparent;
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				color: #fff;
			}

			.activity {
				border: 1rpx solid rgba(255, 255, 255, 0);
				background: #A1F280;
				color: #000;
			}

			.stillness {
				color: #A1F280;
				background: rgba(161, 242, 128, 0.12);
				border-radius: 12rpx;
				border: 1rpx solid #A1F280;
			}
		}

		.circle-container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 400px;
			height: 400px;
			position: relative;
			margin: 0 auto;

			.jjc-bg {
				width: 248.6rpx;
				height: 198.46rpx;
				position: absolute;
				top: 40%;
				left: 0;
				right: 0;
				margin: auto;
				background-image: url('../../../static/my/jjc-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 198.46rpx;
				text-align: center;

				.title {
					font-weight: bold;
					font-size: 60rpx;
					color: #A1F280;
				}

				.mintitle {
					font-weight: 400;
					font-size: 28rpx;
					color: #A1F280;
				}
			}

			.image-container {
				position: relative;

				.active {
					width: 84px;
					height: 84px;
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					line-height: 80px;
					background-color: rgba(0, 0, 0, 0.8);
					border-radius: 50%;
					color: red;
					font-size: 32rpx;

					image {
						width: 84px;
						height: 84px;
					}
				}
			}

			.head {
				image {
					width: 80px;
					height: 80px;
					border: 2px solid #A1F280;
					border-radius: 50%;
				}

				.name {
					text-align: center;
					color: #A1F280;
					margin-top: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.headadd {
				image {
					width: 84px;
					height: 84px;
				}

				.name {
					text-align: center;
					color: #A1F280;
					margin-top: 10rpx;
				}
			}

			.circle {
				width: 84px;
				height: 84px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}


			.circle:nth-child(1) {
				transform: translate(-50%, -50%) rotate(0deg) translateY(-150px) rotate(0deg);
			}

			.circle:nth-child(2) {
				transform: translate(-50%, -50%) rotate(72deg) translateY(-150px) rotate(-72deg);
			}

			.circle:nth-child(3) {
				transform: translate(-50%, -50%) rotate(144deg) translateY(-150px) rotate(-144deg);
			}

			.circle:nth-child(4) {
				transform: translate(-50%, -50%) rotate(216deg) translateY(-150px) rotate(-216deg);
			}

			.circle:nth-child(5) {
				transform: translate(-50%, -50%) rotate(288deg) translateY(-150px) rotate(-288deg);
			}
		}
	}
</style>